<template>
	<view class="container">
		<view class="focuslist">
			<view class="item flex-center" v-for="(item,index) in userList" :key="index" >
				<view class="avatar">
					<image :src="item.avatar" mode=""></image>
				</view>
				<view class="mid">
					<view class="nickname">
						{{item.nickname}}
						<image class="sex" src="../../static/imgs/user/yhzy_xb@2x.png" v-if="item.gender == '女'"></image>
						<image class="sex" src="../../static/imgs/user/yhzy_xb_m@2x.png"  v-if="item.gender == '男'" mode=""></image>
					</view>
					<view class="qianming">
						{{item.qianming}}
					</view>
				</view>
				<view class="btn">
					<image src="../../static/imgs/fans/fs_gz@2x.png" mode="" v-if="!item.focus"></image>
					<image src="../../static/imgs/fans/fs_yg@2x.png" mode="" v-if="item.focus"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userList: [
					{nickname: '朱晓辉', gender: '男', avatar: '../../static/test/a0.jpg', qianming: '遍身罗绮者，不是养蚕人', focus: false},
					{nickname: '魏政', gender: '女', avatar: '../../static/test/a1.jpg', qianming: '好好学习，天天向上。', focus: true},
					{nickname: '金春洋', gender: '男', avatar: '../../static/test/a3.jpg', qianming: '我班，愿称你为最强！', focus: false},
				]
			};
		},
		methods: {
		}
	}
</script>

<style lang="scss" scoped>
	.focuslist {
		.item {
			position: relative;
			margin: 0px 10px 10px;
			border-bottom: 1px solid #cfcfcf;
			padding-bottom: 10px;
			.avatar {
				width: 50px;
				height: 50px;
				margin-right: 10px;
				image {
					height: 100%;
					border-radius: 50%;
				}
			}
			.mid {
				display: flex;
				flex-direction: column;
				.nickname {
					.sex {
						margin-left: 5px;
						width: 14px;
						height: 14px;
					}
				}
			}
			.btn {
				position: absolute;
				right: 10px;
				top: 30%;
				image {
					width: 20px;
					height: 20px;
				}
			}
		}
	}
</style>